<template>
	<view class=" main-bgH   ">
		<navigationBar></navigationBar>
		</image>
		<view class="p-t-90 flex  fd-c ai-c">
			<!-- 			<image class="" style="width: 245rpx; " mode="widthFix"
					src="https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/hyxhl.png"> -->


			<image v-if="id == 1" mode="widthFix" style="width: 469rpx;height: auto;" class="" src="@/static/db.png">
				<image v-if="id == 2" mode="widthFix" style="width: 469rpx;height: auto;" class=""
					src="@/static/gb.png">
					<view class="fs-24 fw-400 p-t-20 l-s-2 c-fff" style="color: #242021;">
						给闪耀座驾加个发光点
					</view>

					<view class="w-100 p-t-50 " style="margin-top: 100rpx;">

						<view v-if="id == 1" class="f jc-c" style="padding: 0 20rpx;">
							<view class=" ">
								<view v-for="(item, index) in list" :class="index === Aikey ?'sel':''" class=" item"
									@click="Aikeyclick" :data-index="index">
									<text>{{item}}</text>

								</view>
							</view>



						</view>

						<view v-if="id == 2" class="f jc-c">

							<view class="rel">
								<view v-for="(item, index) in list2" :class="index === Aikey2 ?'sel':''" class=" item"
									@click="Aikey2click" :data-index="index">
									<text>{{item}}</text>

								</view>
							</view>
						</view>



					</view>

		</view>


		<view @click="sc"
			style="width: 301rpx;height: 94rpx; bottom: 10vh;border-radius: 47rpx; line-height: 94rpx;letter-spacing: 4rpx; color: #465A7E;"
			class="abs-x bg-fff" src="@/static/logo.png">闪耀海报生成</view>

		<FakeProgress :visible.sync="showProgress" :isDone="syntheticDone" @cancel="handleProgressCancel"
			@finishProgress="finishProgressRes">


			<text>请耐心稍等片刻<br /> 正在努力为您生成海报</text>
		</FakeProgress>

		<pop :visible.sync="popshow" :maskClickClose="true">

			<view v-if="checkInShow" class="c-fff p-b-50" style="letter-spacing: 6rpx; ">长按保存至手机<br> 发布朋友圈解锁闪耀值</view>
			<image :src="imgUrl" mode="widthFix" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd"></image>

			<view v-if="!checkInShow" class="c-fff p-t-50" style="letter-spacing: 6rpx; ">长按保存至手机<br> 发布朋友圈解锁闪耀值</view>
			<!-- 自定义分享按钮 -->
			<!-- <button class="share-btn m-t-20" @click="handleShare">去核销</button> -->

			<view v-if="checkInShow" @click="toH5"
				style="width: 301rpx;height: 94rpx; border-radius: 47rpx; line-height: 94rpx;letter-spacing: 4rpx;margin: 20rpx auto 0;"
				class=" bg-fff ">去核销</view>


		</pop>



	</view>
</template>

<script>
	const wx = require('jweixin-module');

	import FakeProgress from "@/components/FakeProgress.vue"
	import pop from "@/components/pop.vue"
	import navigationBar from "@/components/navigationBar.vue"
	import {
		TrackOpTypes
	} from "vue";
	export default {
		components: {
			"FakeProgress": FakeProgress,
			"pop": pop,
			"navigationBar": navigationBar,
		},
		data() {
			return {
				id: 0,
				currentIndex: 0,
				Aikey: 0,
				list: [
					'实力新标杆', '安全新标杆', '舒享新标杆',

				],
				Aikey2: 0,
				list2: [
					'不同', '不晕', '不悬',
				],
				keyText: "",


				showProgress: false,
				syntheticDone: false,

				// popshow: true,
				popshow: false,

				imgUrl: "",
				wxConfigLoaded: false,

				pressTimer: null,
				longPressDuration: 100, // 微信弹窗触发时间约800ms（需实测）

				checkInShow: false,
				OptionKeyText: "",
			}
		},
		onLoad(Option) {
			console.log(Option)
			// let that = this
			// this.$wx.initJssdk(function(res) {

			// 	wx.ready(() => {
			// 		that.wxConfigLoaded = true;
			// 	});
			// })
			if (Option.id) {
				this.id = Option.id
			} else {
				uni.showModal({
					title: "出错了，请联系工作人员。id=" + this.id,
				})
			}

			if (Option.keyText) {
				this.OptionKeyText = Option.keyText
				this.keyText = Option.keyText

				if (this.id == 1) {


					this.list.forEach((i, index) => {

						if (i == this.OptionKeyText) {
							this.imgUrl = "https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/" +
								this.id + "/" + parseInt(index + 1) + ".jpg"
						}
					})



				} else if (this.id == 2) {

					this.list2.forEach((i, index) => {
						if (i == this.OptionKeyText) {
							this.imgUrl = "https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/" +
								this.id + "/" + parseInt(index + 1) + ".jpg"
						}
					})
				} else {
					uni.showModal({
						title: "出错了，请联系工作人员",
					})
					return
				}

				this.popshow = true

			}



		},
		onShow() {
			if (uni.getStorageSync('checkIn')) {

				if (this.id == 1) {
					this.checkInShow = uni.getStorageSync('checkIn').pid.includes(132);
				}
				if (this.id == 2) {
					this.checkInShow = uni.getStorageSync('checkIn').pid.includes(133);
				}
			}
		},
		methods: {
			checkIn() {
				let param = {
					openid: uni.getStorageSync('openid')
				}
				this.$http.get('/TakePhoto/checkIn', param, res => {
					console.log(res)

					uni.setStorageSync('checkIn', res.data);

					if (this.id == 1) {
						this.checkInShow = uni.getStorageSync('checkIn').pid.includes(132);
					}
					if (this.id == 2) {
						this.checkInShow = uni.getStorageSync('checkIn').pid.includes(133);
					}


				})
			},
			toH5() {
				// 网页内跳转时携带参数
				// window.location.href = 'https://lvboguan.artigit.com/static_web/ceshi/index.html?type=' + this.id +
				// 	'&user=' + uni.getStorageSync('openid');

				console.log('https://projects.topversion.cn/btzg2025sh/web/activity/getdakaHtml?type=' + this.id +
					'&user=' + uni.getStorageSync('openid'))

				window.location.href = 'https://projects.topversion.cn/btzg2025sh/web/activity/getdakaHtml?type=' + this
					.id + '&user=' + uni.getStorageSync('openid');




			},
			handleTouchStart() {
				this.pressTimer = setTimeout(() => {
					this.onLongPress();
				}, this.longPressDuration);
			},
			handleTouchEnd() {
				clearTimeout(this.pressTimer);
			},
			onLongPress() {
				// 用户长按了足够时间，可能触发微信弹窗
				// uni.showToast({
				// 	title: "检测到长按，微信弹窗可能已出现"
				// })
				console.log("检测到长按，微信弹窗可能已出现");
				
				let param = {
					user: uni.getStorageSync('openid'),
					type: this.id,
					option: this.keyText,
				}
				this.$http.get('/TakePhoto/getdaka', param, res => {
					console.log(res)

					this.checkIn()
				})


				// 这里可执行统计等逻辑
			},
			finishProgressRes() {
				// 进度条结束了

				this.popshow = true
				this.handleProgressCancel()
			},
			// 点击分享按钮触发
			handleShare() {
				if (!this.wxConfigLoaded) {
					uni.showToast({
						title: '加载中，请稍后',
						icon: 'none'
					});
					return;
				}

				// 设置分享给朋友的内容
				wx.updateAppMessageShareData({
					title: '好友，看看这个图片！', // 分享标题
					desc: '点击直达精彩内容', // 分享描述
					link: 'https://your-domain.com/pages/B/index?from=share', // 分享链接（页面B）
					imgUrl: 'https://your-domain.com/share-thumbnail.jpg', // 分享图标
					success: () => {
						console.log('朋友分享设置成功');
					}
				});

				// 设置分享到朋友圈的内容
				wx.updateTimelineShareData({
					title: '朋友圈分享标题', // 朋友圈只读标题
					link: 'https://your-domain.com/pages/B/index?from=share',
					imgUrl: 'https://your-domain.com/share-thumbnail.jpg',
					success: () => {
						console.log('朋友圈分享设置成功');
					}
				});

				// 提示用户操作（微信限制不能直接调起分享，需用户主动触发）
				uni.showModal({
					content: '请点击右上角菜单分享给好友或朋友圈',
					showCancel: false
				});
			},
			handleProgressCancel() {
				this.showProgress = false
				this.syntheticDone = false
			},
			// swiper 切换时触发的事件处理函数
			onSwiperChange(e) {
				// 获取当前显示的 item 索引
				this.currentIndex = e.detail.current;
				console.log('当前显示的 item 索引:', this.currentIndex);
			},
			Aikeyclick(e) {
				let {
					index
				} = e.currentTarget.dataset

				this.Aikey = index
			},
			Aikey2click(e) {
								
				let {
					index
				} = e.currentTarget.dataset

				this.Aikey2 = index
			},
			sc() {


				console.log(this)
				if (this.id == 1) {


					this.keyText = this.list[this.Aikey]

				} else if (this.id == 2) {

					this.keyText = this.list2[this.Aikey2]

				} else {
					uni.showModal({
						title: "出错了，请联系工作人员",
					})
					return
				}

				// if (this.Aikey == 3) {
				// 	uni.showModal({
				// 		title: "暂无该素材",
				// 	})

				// 	return

				// }



				if (this.keyText) {
					console.log(this.keyText)
					this.showProgress = true

					var time1 = setTimeout(() => {

						clearTimeout(time1);
						time1 = null;
						if (this.id == 1) {



							this.imgUrl = "https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/" +
								this.id + "/" + parseInt(this.Aikey + 1) + ".jpg"

						} else if (this.id == 2) {


							this.imgUrl = "https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/" +
								this.id + "/" + parseInt(this.Aikey2 + 1) + ".jpg"

						} else {
							uni.showModal({
								title: "出错了，请联系工作人员",
							})
							return
						}

						this.syntheticDone = true





					}, 500)


					// let param = {
					// 	keyword: this.keyText,
					// 	carMode: this.id,
					// }
					// this.$http.get('/SynthesisPoster', param, res => {

					// 	console.log(res)
					// 	uni.hideLoading()
					// 	if (res.code == 200) {


					// 		// this.syntheticDone = true

					// 		// this.imgUrl = res.data


					// 	} else {
					// 		// uni.showToast({
					// 		// 	title: '请求失败！',
					// 		// 	icon: 'none'
					// 		// })


					// 	}
					// }, cdError => {
					// 	// uni.showToast({
					// 	// 	title: '请求失败！',
					// 	// 	icon: 'none'
					// 	// })
					// 	this.handleProgressCancel()
					// })






				} else {
					uni.showModal({
						title: "出错了，请联系工作人员",
					})
					return
				}

			},
		}
	}
</script>

<style>
	.main-bgH {
		width: 100%;
		height: 100%;
		padding: 5vh 50rpx 0;
		position: relative;
		/* 	background: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/bj2.png') center 65%/100% auto no-repeat; */
		background-image: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/bj2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.share-btn {
		width: 227rpx;
		height: 67rpx;
		line-height: 67rpx;
		background-color: #fff;
		color: #595757;
		border-radius: 0;
		border: 0 solid;
	}

	.swiper {
		width: 100%;
		height: 48vh;
		/* background-color: #fff; */
	}

	.item {
		font-weight: 300;
		font-size: 40rpx;
		color: #595757;
		line-height: 133rpx;
		width: 562rpx;
		height: 133rpx;
		background-image: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/nosel.png ');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 60rpx;
		/* https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/nosel.png */
	}

	.sel {
		color: #465A7E;
		background-image: url('https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/sel.png ');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.sel2 {
		color: #989FA5;
		background: #293D60;
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(41, 61, 96, 0.2);
		border-radius: 13rpx;
		transform: scale(1.2);
		/* 放大1.2倍 */
		transition: transform 0.3s ease-in-out;
		/* 添加过渡效果 */
	}

	.item0 {
		left: 20rpx;
		top: 20rpx;
		width: 173rpx;
		height: 53rpx;
		line-height: 53rpx;
	}

	.item1 {
		width: 320rpx;
		height: 57rpx;
		line-height: 57rpx;
		left: 235rpx;
		top: 35rpx;
		font-size: 29rpx;
	}

	.item2 {
		font-size: 39rpx;
		width: 237rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 29rpx;
		top: 117rpx;
	}

	.item3 {
		width: 280rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 300rpx;
		top: 10vh;
		font-size: 24rpx;
	}

	.item4 {
		width: 222rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 20rpx;
		top: 15vh;
		font-size: 29rpx;
	}

	.item5 {
		width: 189rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 290rpx;
		top: 17vh;
		font-size: 39rpx;
	}

	.item6 {
		width: 295rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 20rpx;
		top: 23vh;
	}

	.item7 {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 335rpx;
		top: 26vh;
		font-size: 27rpx
	}

	.item8 {
		width: 187rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 120rpx;
		top: 30vh;
		font-size: 33rpx
	}

	.item9 {
		width: 383rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 80rpx;
		top: 36.5vh;
		font-size: 25rpx
	}


	.itemB0 {
		top: 20rpx;
		left: 20rpx;
		width: 173rpx;
		height: 53rpx;
		line-height: 53rpx;
	}

	.itemB1 {
		width: 320rpx;
		height: 57rpx;
		line-height: 57rpx;
		left: 235rpx;
		top: 40rpx;
		font-size: 29rpx;
	}

	.itemB2 {
		font-size: 39rpx;
		width: 237rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 29rpx;
		top: 117rpx;
	}

	.itemB3 {
		width: 280rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 300rpx;
		top: 10vh;
		font-size: 24rpx;
	}

	.itemB4 {
		width: 222rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 20rpx;
		top: 15vh;
		font-size: 29rpx;
	}

	.itemB5 {
		width: 189rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 290rpx;
		top: 17vh;
		font-size: 39rpx;
	}

	.itemB6 {
		width: 295rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 20rpx;
		top: 23vh;
	}

	.itemB7 {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		left: 335rpx;
		top: 26vh;
		font-size: 27rpx
	}

	.itemB8 {
		width: 187rpx;
		height: 67rpx;
		line-height: 67rpx;
		left: 120rpx;
		top: 30vh;
		font-size: 33rpx
	}

	.itemB9 {
		width: 383rpx;
		height: 53rpx;
		line-height: 53rpx;
		left: 80rpx;
		top: 36.5vh;
		font-size: 25rpx
	}
</style>